<template>
  <div class="admin-header clearfix" ref="header">
      <div class="main-logo"><img src="static/images/admin_logo.png" /></div>
      <div class="fast-link">
          <div v-for="nav in navData" :key="nav.index" class="link" :class="{'active':$route.path==nav.url}" @click="link(nav.url)">
              <i class="icon" :class="nav.icon"></i>
              <!-- <el-badge :value="4" :max="99" class="item" v-if="nav.url == '/ProcessConsole/history'">
                  <span>{{ nav.meunName }}</span>
              </el-badge> -->
              <!-- <span v-else>{{ nav.meunName }}</span> -->
              <span>{{ nav.meunName }}</span>
          </div>
          <!-- <div class="link" @click="flowConfig" v-if="isShowFlex" :class="{'active':$route.path=='/Flow'}">
              <i class="icon icon-history"></i>
              <span>流程配置</span>
          </div> -->
      </div>
      <el-menu class="head-nav" mode="horizontal" @select="handleSelect">
          <div class="fast-link p-preview">
              <el-popover trigger="hover" placement="bottom" width="280">
                  <ul class="prev-list">
                      <li><i class="el-icon-warning color-warning"></i> <span title="text">2019/09/03 18:00资产"ZC-000"密级发生变更[责任人:张三]</span><a @click="messageItem(1)">查看<span class="Oo">>></span></a></li>
                      <li><i class="el-icon-success color-success"></i> <span title="text">2019/09/03 18:00资产"ZC-000"密级发生变更[责任人:张三]</span><a @click="messageItem(2)">查看<span class="Oo">>></span></a></li>
                      <li><i class="el-icon-error color-warning"></i> <span title="text">2019/09/03 18:00资产"ZC-000"密级发生变更[责任人:张三]</span><a @click="messageItem(3)">查看<span class="Oo">>></span></a></li>
                      <li><i class="el-icon-info color-info"></i> <span title="text">2019/09/03 18:00资产"ZC-000"密级发生变更[责任人:张三]</span><a @click="messageItem(4)">查看<span class="Oo">>></span></a></li>
                  </ul>
                  <el-button type="primary" @click="messageDialog = true">查看全部消息</el-button>
                  <div class="link" slot="reference">
                      <i class="el-icon-message"></i>
                      <el-badge :value="4" :max="99" class="item">
                          <span>消息中心</span>
                      </el-badge>
                  </div>
              </el-popover>
          </div>
          <el-submenu index="1">
              <template slot="title"><img :src="avatar" class="admin-head">{{ adminDepartment }} {{ adminName }}</template>
              <el-menu-item @click="toChangePwd">密码修改</el-menu-item>
              <el-menu-item @click="loginOut">退出</el-menu-item>
          </el-submenu>
      </el-menu>
      <!-- 消息窗口 -->
      <el-dialog title="消息中心" :visible.sync="messageDialog" append-to-body>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-warning color-warning"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p class="message-content-show">责任人:张三(人事部) ,资产由"在用"变为"维修"具体请查看>> <a class="zcool-link-color" href="#">涉密资产维修申请</a></p>
              </div>
          </div>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-success color-success"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p>责任人:张三(人事部) ,资产由"普通"变为"绝密"具体请查看>> <a class="zcool-link-color" href="#">涉密资产密级变更申请</a></p>
              </div>
          </div>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-warning color-warning"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p class="message-content-show">责任人:张三(人事部) ,资产由"普通"变为"绝密"具体请查看 >> <a class="zcool-link-color" href="#">涉密资产密级变更申请</a></p>
              </div>
          </div>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-info color-info"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p class="message-content-show">责任人:张三(人事部) ,资产由"普通"变为"绝密"具体请查看>> <a class="zcool-link-color" href="#">涉密资产密级变更申请</a></p>
              </div>
          </div>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-warning color-warning"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p class="message-content-show">责任人:张三(人事部) ,资产由"普通"变为"绝密"具体请查看>> <a class="zcool-link-color" href="#">涉密资产密级变更申请</a></p>
              </div>
          </div>
          <div class="message-item">
              <div class="message-icon">
                  <i class="el-icon-error color-warning"></i>
              </div>
              <div class="message-sender">
                  <p class="message-name">
                      <span class="message-title">财务专用台式机(编号:ZC-00002)</span>
                      <span class="message-time">2016/11/30 11:06</span>
                  </p>
                  <p class="message-content-show">责任人:张三(人事部) ,资产由"普通"变为"绝密"具体请查看>> <a class="zcool-link-color" href="#">涉密资产密级变更申请</a></p>
              </div>
          </div>
          <div class="page-wrap">
              <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
      </el-dialog>
  </div>
</template>

<script>
//VUEX 教程示例操作
//this.$store.state.testCount 直接获取状态
//this.$store.getters.testCount 通过过滤器获取
//this.$store.dispatch('addAction',5)" 异步操作状态储存里的方法改变state
//this.$store.commit('add',10)"  操作状态储存里的方法改变state

import { mapGetters } from "vuex";

export default {
  name: "Header",
  data() {
    return {
      messageDialog: false,
      adminName: this.$store.getters.adminName,
      // adminDepartment: "",
      navData: this.$store.getters.authorization,
      isShowFlex: true
    };
  },
  methods: {
    flowConfig() {
      // window.open(`${process.env.ROOT}/activiti/create`, "_blank");
      this.$router.push({
        path: "/Flow"
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loginOut() {
      this.$message({
        message: "退出登录",
        duration: "1000",
        type: "error",
        center: true
      });
      //清除cookie回到登录页面
      this.$store.dispatch("loginOut").then(res => {
        location.reload();
      });
    },
    toChangePwd() {
      this.$router.push({
        path: "/AdminHome/ChangePassword"
      });
    },
    visibleList() {
      visibleList = true;
    },
    link(url) {
      this.$router.push({
        path: url
      });
    },
    messageItem(id) {
      this.$router.push({
        path: "/ProcessConsole/detail" + "?id=" + id
      });
    }
  },
  computed: {
    // mapGetters映射到计算属性上 缓存起来
    // 使用方法 例子:this.adminName 详见 store 设置
    // ...mapGetters([
    //   "authorization",
    //   "assetsAuthorization"
    // ]),
    avatar: function() {
      if (this.$store.getters.avatar == undefined) {
        return "/static/images/defalt_avatar.png";
      } else {
        return this.$store.getters.avatar;
      }
    },
    adminDepartment: function() {
      if (JSON.parse(this.$store.getters.adminDepartment) == null) {
        return "";
      } else {
        return JSON.parse(this.$store.getters.adminDepartment).label;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fast-link {
  float: left;
  margin-left: 20px;
  .link {
    float: left;
    display: flex;
    align-items: center;
    height: 60px;
    color: #fff;
    padding: 0 10px;
    cursor: pointer;
    .icon {
      font-size: 14px;
    }
  }
  .link:hover,
  .active {
    background: #5e8ae9;
  }
}

.prev-list {
  padding: 10px 0;
  margin: 0;
  li {
    list-style: none;
    padding: 5px;
    font-size: 12px;
    display: flex;
    align-items: center;
    span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-left: 8px;
    }
    a {
      float: right;
      cursor: pointer;
      width: 85px;
      text-align: right;
    }
  }
  li:hover {
    background: #ecf5ff;
  }
  .Oo {
    font-family: cursive !important;
    padding-left: 2px;
  }
}

.el-button {
  width: 100%;
}

.desktop-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .el-row {
    width: 1400px;
    margin: 145px auto 0;
  }
  .icon-item {
    text-align: center;
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 50px;
    cursor: pointer;
  }
}

.el-icon-message {
  margin-right: 10px;
  font-size: 16px;
}
.admin-header {
  background-color: #365fb7;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  .admin-head {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .el-submenu {
    background: #5e8ae9 !important;
  }
}
</style>